<!-- cj -->
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <head th:include="/utils/common_css :: commonCss"></head>
    <!--<link th:href="@{/static/css/datatables.bundle.css}" rel="stylesheet" type="text/css"/>-->
    <link th:href="@{/static/css/data_table.css}" rel="stylesheet" type="text/css"/>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
<div class="m-grid m-grid--hor m-grid--root m-page">
    <div th:replace="/utils/header :: header"></div>
    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
        <div th:replace="/utils/left_menu :: leftMenu"></div>
        <div class="cj-main">
            <div class="cj-main-header">
                <ul>
                    <li class="icon">
                        <i class="m-nav__link-icon la la-home"></i>
                    </li>
                    <li>
                        <a class="decoration" >系统设置</a>
                    </li>
                    <li>
                        <a class="decoration" href="/admin/sys/role">角色信息展示</a>
                    </li>
                </ul>
            </div>
            <div class="cj-main-content">
                <!-- 控件栏位 -->
                <div class="cj-m-c-control">
                    <!--     <div class="search">
                             <label><span>Search:</span><input type="search"  placeholder="" ></label>
                         </div>-->
                    <div class="search">
                        <ul class="items">
                            <li class="tools-items-item">
                                <label>筛选条件:<input type="search" id="search" placeholder="" ></label>
                            </li>
                        </ul>
                    </div>
                    <div class="tools">
                        <ul class="items">
                            <li class="tools-items-item">
                                <a class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--icon m-btn--air" href="/admin/sys/role/add">
                                    <span>
                                       <i class="la la-cart-plus"></i>
                                        <span>
                                            添加新角色
                                        </span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 数据展示 -->
                <div class="cj-m-c-data">
                    <!-- 数据表格展示 -->
                    <div class="data-table">
                        <table>
                            <thead>
                                <tr>
                                    <th class="data-table-code">唯一编号</th>
                                    <th class="data-table-name">角色名称</th>
                                    <th class="data-table-state">状态</th>
                                    <th class="data-table-actions">操作</th>
                                </tr>
                            </thead>
                            <tbody id="dataTableRows">

                            </tbody>
                        </table>
                    </div>
                    <!-- 分页展示 -->
                    <div class="data-page dataTables_paginate paging_simple_numbers">
                        <div class="data-page-content" id="rowCount">

                        </div>
                        <div class="data-page-number">
                            <ul class="pagination" id="pageNumber">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="/utils/common_js :: commonJS"></div>
<script th:src="@{/static/js/utils.js}" type="text/javascript"></script>
<script th:src="@{/static/js/ajax.js}" type="text/javascript"></script>
<script th:src="@{/static/js/page.js}" type="text/javascript"></script>
<script>
    window.onload = ajaxLoadDateTabel();

    var key = ["id","description","state"];

    var operation = '<td>' +
        '<a href="/admin/sys/role/OPERATIONID" class="btn btn-outline-primary btn-sm m-btn m-btn--icon"><span><i class="fa fa-tag"></i><span>详情</span></span></a>&nbsp;&nbsp;' +
        '<a onclick="setState(OPERATIONID,1)" href="#" class="btn btn-outline-success btn-sm m-btn m-btn--icon"><span><i class="fa fa-arrow-up"></i><span>启用</span></span></a>&nbsp;&nbsp;' +
        '<a onclick="setState(OPERATIONID,2)" href="#" class="btn btn-outline-danger btn-sm m-btn m-btn--icon"><span><i class="fa fa-arrow-down"></i><span>禁用</span></span></a>&nbsp;&nbsp;' +
        '</td>';

    function ajaxLoadDateTabel(index) {
        var index = index || 1;
        empty();
        postAjax('/admin/sys/roles',
            {"search": $("#search").val(), "index": index },
            function (result) {
                if(result.code===1){
                    pageCount(index,result.data,key,operation);
                }
            });
    }

    function setState(id, state) {
        postAjax('/admin/sys/updateRole', {"id": id, "state": state });
    }


</script>
</body>
</html>